import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import "./index.scss";
import { userList, companyList } from "./constant";
import styled from "styled-components";
//使用styled来改变“退出登录”按钮的样式
const OutStyle = styled.div`
    position: absolute;
    top: 100px;
    right: 0;
    cursor: pointer;
    color: white;
    font-size: 15px;
    font-weight: bold;
    font-family: "微软雅黑 Light";
    margin-right: 20px;
    margin-top: 0px;
    border-radius: 3px;
    background-color: #CAC1AA;
    padding: 10px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    //“退出登录”按钮悬停时的样式
    &:hover {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
        font-size: 20px;
        transition: all 0.5s;
        font-weight: bold;
    }

`;
//公司账号的账户名
const data = ["公司A","公司B","公司C"]
//Home组件
const Home = () => {

    const username = localStorage.getItem("username");
    const [list, setList] = useState(userList);
    const history = useHistory();
    //使用useEffect钩子监听登录的账号是公司还是普通用户
    useEffect(() => {
        if (data.includes(username) ) {
            setList(companyList);
        } else {
            setList(userList);
        }
    }, [username]);
    //设置跳转函数，用于网页链接
    const handleChange = url => {
        history.push(url);
    };
    //声明judge函数控制盒子left显示内容
    function judge(){
        if (data.includes(username)){
            return <div className="company">
                欢迎使用公司端
            </div>
        }
        else{
            return <div className="user">欢迎使用用户端</div>
        }
    }
    return <div>
        <OutStyle onClick={() => history.push("/globalNews/login")}>退出登录</OutStyle>


        <div className="home">
            <div className="left">{judge()}</div>
            <div className="box">
                {list.map((item, index) => {
                    return <div
                        key={item.name}
                        style={{background: item.color, backgroundImage: `url(${item.image})`}}
                        onClick={() => handleChange(item.url)}
                    >
                        {item.name}
                    </div>;
                })}
            </div>
            {
                list.map((item, index) => {
                })
            }
            <div>
            </div>
        </div>
    </div>;
};
export default Home;
